<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>颜色选择器文档 - layui.colorpicker</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">

	<div id="test1"></div>
	<script>
		layui.use('colorpicker', function () {
			var colorpicker = layui.colorpicker;
			//渲染
			colorpicker.render({
				elem: '#test1',  //绑定元素
				color: 'green', //默认颜色，不管你是使用 hex、rgb 还是 rgba 的格式输入，最终会以指定的格式显示。
				predefine: true, //预定义颜色是否开启,默认 false
				//颜色被改变的回调
				//当颜色在选择器中发生选择改变时，会进入 change 回调，你可以通过它来进行所需操作，下面的例子就是实时的输出当前选择器的颜色 
				change: function (color) {
					console.log("you click "+color)
				},
				//回调名：done 
				//点击颜色选择器的“确认”和“清除”按钮，均会触发 done 回调，回调返回当前选择的色值。
				done: function (color) {
					console.log("you select "+color)
					//譬如你可以在回调中把得到的 color 赋值给表单
				}


			});
		});
	</script>



</body>

</html>